#page5{
    background: url(../img/p5/bj.png) no-repeat;
    background-size: 100% 100%;
}
.page5_content{
    background-color: lightblue;
    width: 100%;
    height: 100%;
    clip-path: circle(120px at 50% 36%);
}
.page5_content>img{
    position: absolute;
    width: 240px;
    height: 200px;
    top: 100%;
    left: 100%;
    margin-left: -120px;
    margin-top: -100px;
    transform: scale(1.8);
}
.page5_content>.water1{
    animation: water1 3s 1s linear forwards;
    top: 70%;
    left: 50%;
}
@keyframes water1{
    0%{top: 70%;left: 55%;}
    20%{top: 64%;left: 50%;}
    40%{top: 58%;left: 55%;}
    60%{top: 52%;left: 60%;}
    80%{top: 46%;left: 50%;}
    100%{top: 40%;left: 55%;}
}
.page5_content>.water2{
    animation: water2 3s 1.2s linear forwards;
    top: 68%;
    left: 50%;
}
@keyframes water2{
    0%{top: 68%;left: 50%;}
    20%{top: 62%;left: 55%;}
    40%{top: 56%;left: 60%;}
    60%{top: 52%;left: 55%;}
    80%{top: 44%;left: 50%;}
    100%{top: 40%;left: 45%;}
}
.page5_content>.water3{
    animation: water3 3s 1.5s linear forwards;
    top: 64%;
    left: 50%;
}
@keyframes water3{
    0%{top: 64%;left: 45%;}
    20%{top: 60%;left: 40%;}
    40%{top: 54%;left: 50%;}
    60%{top: 48%;left: 52%;}
    80%{top: 44%;left: 50%;}
    100%{top: 40%;left: 48%;}
}
.shade{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: circle(50px at 50% 44%);
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.shade>img{
    width: 120px;
    height: 120px;
}
